/*
 * @Author: likang xie 
 * @Date: 2018-06-11 11:27:17 
 * @Purpose: 程序主样式
 */
@import 'theme.scss';

#app {
  height: 100%;

  .user-info {
    width: 16rem;
    margin-right: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    line-height: 2;
    border-bottom: .1rem solid #443620;

    .icon {
      width: 10rem;
      height: 10rem;
      margin: 2rem auto .5rem;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .logout-btn {
      color: rgba($color: #fff, $alpha: .7)
    }
  }

  .app-content {
    min-width: 120rem;
    margin-left: 16rem;
    height: 100%;
    box-sizing: border-box;
    @extend .has-animate;

    &.hide {
      margin-left: 4rem;
    }

    iframe {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
  }

  .toggle-nav-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;

    .layui-icon {
      font-size: 2rem
    }
  }

  .layui-side {
    @extend .has-animate;

    &.hide {
      width: 4rem;
      overflow: hidden;

      .layui-side-scroll {
        @extend .has-animate;
        width: 4rem;
        opacity: 0;
      }
    }
  }

  .bt-tui {
    width: 13rem;
    margin: 5rem 1.5rem 0;

    .btn {
      position: relative;
      width: 100%;
      height: 4rem;
      cursor: pointer;
      text-align: center;
      background-color: #4b81e1;
      padding-top: .5rem;

      &:hover {
        opacity: .9;
      }

      .title {
        font-size: 1.6rem;
      }

      .neice {
        position: absolute;
        top: -.2rem;
        right: -.2rem;
        width: 3rem;
        height: 3rem;
        background: url('/static/image/neice.png') no-repeat center / 100% 100%;
      }
    }

    .qrcode-warpper {
      background-color: #fff;
      padding: .5rem;

      img {
        width: 100%;
      }
    }

    .center {
      margin-top: .5rem;
      text-align: center;
    }
  }
}

.has-animate {
  transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}